<template>
  <div class="dashboard-container">
    <v-md-editor
      v-model="localContent"
      :default-mode="'preview'"
      :disabled-menus="[]"
      @change="handleChange"
    />
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'MarkdownView',
  props: {
    content: {
      type: String,
      default: ''
    },
    externalLink: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    const localContent = ref(props.content)

    watch(() => props.content, (newVal) => {
      localContent.value = newVal
    })

    const handleChange = (value) => {
      emit('update:content', value)
    }

    return {
      localContent,
      handleChange
    }
  }
}
</script>

<style lang="scss" scoped>
.markdown-container {
  :deep(.markdown-body) {
    font-size: 14px;
    line-height: 1.8;
    
    pre {
      background-color: #f6f8fa;
      padding: 16px;
      border-radius: 6px;
    }
  }

  :deep(.v-md-editor__toolbar) {
    border-bottom: 1px solid #eaecef;
  }
}
</style>
